import React, { useState } from 'react'
import { Navigate, Link, useNavigate } from 'react-router-dom'
type Props = {}

// 验证Navigate组件的特点: 

export default function Home({ }: Props) {
    const [num, setnum] = useState(0)
    // 定义数组列表
    const [nameList, setNameList] = useState([{ id: 1, name: 'jim' }, { id: 2, name: 'jack' }, { id: 3, name: 'rose' }])
    // 定义gotodetail方法
    // 注意: 在react-router-dom@6中没有useHistory hook, 要想实现编程式导航使用 useNavigate
    const navigate = useNavigate();
    console.log('navigate', navigate);

    const gotodetail = (id: number) => {
        console.log(id);
        //  该配置项主要用来进行隐式传参的配置的
        navigate('/detail/' + id, {
            state: {
                id
            }
        })


    }
    return (
        <div>
            首页
            <p onClick={() => setnum(num + 1)}>num:{num}</p>
            {
                num == 5 ? <Navigate to='/category'></Navigate> : <></>
            }
            {/* <Navigate to='/categoty'></Navigate> */}

            {/*
             渲染数据列表 
             方式1: 使用声明式导航传参
            */}
            {/* {
                nameList.map(item => {
                    // 方式1 传值查询字符串方式
                    // return <li key={item.id}><Link to={`/detail?id=${item.id}`}>{item.name}</Link ></li>
                    // 方式2: 动态路由的方式
                    // return <li key={item.id}><Link to={`/detail/${item.id}`}>{item.name}</Link ></li>

                    // 方式3:  使用state 隐式传参方式
                    return <li key={item.id}><Link to={{ pathname: '/detail', search: `id=${item.id}` }} state={{ id: item.id }}>{item.name}</Link ></li>

                })
            } */}


            {/* 编程式导航 */}
            {
                nameList.map(item => {
                    return <li key={item.id} onClick={() => gotodetail(item.id)}>{item.name}</li>
                })
            }
        </div>
    )
}